<template>
  <div>
    <Top></Top>
    <div class="sjBox">
      <el-container>
        <el-aside style="background-color: #fff;" width="150px">
          <div class="sahngjitop">
            <span class="lb"></span>
            <span>商机功能列表</span>
          </div>
          <el-menu default-active="2" class="el-menu-vertical-demo" router :collapse="isCollapse"
            :collapse-transition="false" :unique-opened="true" background-color="#fff" text-color="#000">
            <el-menu-item index="/opml">
              <template #title>
                <div class="yangshi">
                  <img src="@/assets/img/gzt/bxlb.png" class="sjimg" />
                  <span class="mt_10">订阅列表</span>
                </div>
              </template>
            </el-menu-item>
            <el-menu-item index="/book">
              <template #title>
                <div class="yangshi">
                  <img src="@/assets/img/gzt/dysz.png" class="sjimg" />
                  <span class="mt_10">订阅设置</span>
                </div>
              </template>
            </el-menu-item>
            <el-menu-item index="/movement">
              <template #title>
                <div class="yangshi">
                  <img src="@/assets/img/gzt/tssz.png" class="sjimg" />
                  <span class="mt_10">推送设置</span>
                </div>
              </template>
            </el-menu-item>
            <el-menu-item index="">
              <template #title>
                <div class="yangshi">
                  <img src="@/assets/img/gzt/sousuo.png" class="sjimg" />
                  <span class="mt_10">搜索</span>
                </div>
              </template>
            </el-menu-item>
            <el-menu-item index="">
              <template #title>
                <div class="yangshi">
                  <img src="@/assets/img/gzt/xmjdjk.png" class="sjimg" />
                  <span class="mt_10">项目进度监控</span>
                </div>
              </template>
            </el-menu-item>
            <el-menu-item index="">
              <template #title>
                <div class="yangshi">
                  <img src="@/assets/img/gzt/qyqbjk.png" class="sjimg" />
                  <span class="mt_10">企业情报监控</span>
                </div>
              </template>
            </el-menu-item>
            <el-menu-item index="">
              <template #title>
                <div class="yangshi">
                  <img src="@/assets/img/gzt/yzjk.png" class="sjimg" />
                  <span class="mt_10">业主监控</span>
                </div>
              </template>
            </el-menu-item>
            <el-menu-item index="">
              <template #title>
                <div class="yangshi">
                  <img src="@/assets/img/gzt/lbsc.png" class="sjimg" />
                  <span class="mt_10">收藏列表</span>
                </div>
              </template>
            </el-menu-item>
            <el-menu-item index="/collect">
              <template #title>
                <div class="yangshi">
                  <img src="@/assets/img/gzt/lbsc.png" class="sjimg" />
                  <span class="mt_10">收藏列表</span>
                </div>
              </template>
            </el-menu-item>
            <el-menu-item index="">
              <template #title>
                <div class="yangshi">
                  <img src="@/assets/img/gzt/wdkh.png" class="sjimg" />
                  <span class="mt_10">我的客户</span>
                </div>
              </template>
            </el-menu-item>
            <el-menu-item index="">
              <template #title>
                <div class="yangshi">
                  <img src="@/assets/img/gzt/qzxmyc.png" class="sjimg" />
                  <span class="mt_10">潜在项目预测</span>
                </div>
              </template>
            </el-menu-item>
            <el-menu-item index="">
              <template #title>
                <div class="yangshi">
                  <img src="@/assets/img/gzt/qzkhwj.png" class="sjimg" />
                  <span class="mt_10">潜在客户挖掘</span>
                </div>
              </template>
            </el-menu-item>
            <el-menu-item index="">
              <template #title>
                <div class="yangshi">
                  <img src="@/assets/img/gzt/qzjzds.png" class="sjimg" />
                  <span class="mt_10">潜在竞争对手</span>
                </div>
              </template>
            </el-menu-item>
            <el-menu-item index="">
              <template #title>
                <div class="yangshi">
                  <img src="@/assets/img/gzt/hzhbwj.png" class="sjimg" />
                  <span class="mt_10">合作伙伴挖掘</span>
                </div>
              </template>
            </el-menu-item>
          </el-menu>
        </el-aside>
      </el-container>
      <el-container>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </div>
  </div>
  <div>

  </div>
</template>

<script setup>
import { ref } from "vue";
import Top from "@/components/workHearder/index.vue";
</script>

<style lang="scss" scoped>
.mt_10 {
  margin-top: -10px;
}

.sjimg {
  width: 60px;
  height: 60px;
  margin-top: 10px;
}

.sahngjitop {
  display: flex;
  margin-top: 20px;
  margin-bottom: 5px;

  .lb {
    width: 4px;
    height: 16px;
    margin-right: 6px;
    margin-left: 20px;
    background-color: #6675FF;
    border-radius: 10px;
  }
}

.yangshi {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.el-menu {
  display: flex;
  width: 100%;
  align-items: center;
  --el-menu-text-color: #000;
  margin-bottom: 0;
}

.el-menu-item {
  height: 100%;
}

.el-aside {
  width: 100%;
}

:deep() {

  //选中状态
  .is-active {
    margin-right: 10px !important;
    margin-top: 0px !important;
    width: 100px;
    height: 104px;
    background: #FFFFFF;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    border-radius: 8px;
    padding-left: 20px !important;

    .img {
      // margin-top: -10px;
      width: 60px;
      height: 60px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .tit {
      // margin-top: -10px;
      text-align: center;
      margin-top: 10px;
      height: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #304156;
      line-height: 14px;
    }
  }

}

.el-main {
  padding: 0;
  overflow: hidden;
}
.sjBox{
  height: 500px;
  overflow-x: hidden;
  overflow-x: scroll;
}
</style>
